<template>
	<view class="container">
		<view class="login">
			<!-- 当用户已登录时显示Logo -->
			<image v-if="isSignIn" class="logo" src="/static/logo.png"></image>
			<!-- 登录表单，如果用户未登录则不显示 -->
			<SignIn v-if="isSignIn" @changeVisible="changeVisible" />
			<!-- 注册表单，如果用户已登录则不显示 -->
			<SignUp v-else @changeVisible="changeVisible" />
		</view>
	</view>
</template>

<script setup>
	// 导入SignIn和SignUp组件
	import SignIn from './signIn/index.vue';
	import SignUp from './signUp/index.vue';
	import { ref } from 'vue';

	// 使用ref创建一个响应式变量，初始值为true，用于控制登录/注册表单的可见性
	const isSignIn = ref(true);

	/**
	 * 切换登录/注册表单的可见性
	 * @param {boolean} value - 设置表单的可见状态，true为显示登录表单，false为显示注册表单
	 */
	const changeVisible = (value) => {
		isSignIn.value = value;
	};
</script>

<style lang="scss" scoped>
	@import './login.scss';
</style>
